<template>
  <view class="recharge-method margin-top-20 bg-white padding-lr-20">
    <view v-for="(item,index) in rechargeMethods" :key="index" class="recharge-methods-item flex-row align-center justify-between padding-left-10 padding-right-30" @click="handleClick(item)">
      <view class="flex-row align-center">
        <image :src="`/static/${item.icon}-pay.png`" class="pay-icon margin-right-40" />
        <text class="text-28 color-t1">{{item.text}}</text>
      </view>

      <by-radius :model-value="item.id === modelValue"></by-radius>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { IPayType } from '@/common/types'

interface IProps{
  modelValue: string
}

withDefaults(defineProps<IProps>(), {})

const $emit = defineEmits(['update:modelValue', 'click'])

interface IMethods{
  id: IPayType
  [key:string] :string
}

const rechargeMethods:IMethods[] = [
  { icon: 'wechat', text: '微信', id: 'WXPAY' },
  /* #ifdef APP-PLUS*/
  { icon: 'ali', text: '支付宝', id: 'ALIPAY' }
  /* #endif*/
]

function handleClick(item:IMethods) {
  $emit('update:modelValue', item.id)
  $emit('click')
}
</script>

<style scoped lang="scss">
.recharge-methods-item{
  height: 126rpx;
  border-bottom: 2rpx solid $color-border;

  &:last-child{
    border: none;
  }

  .pay-icon{
    width: 58rpx;
    height: 58rpx;
  }

}
</style>
